<template>
	<view>
		<view class="notice">
			<view class="notice-content">
				<text>货物信息添加：多件货物，一样品名、一样数量填写一件包裹数量，件数填写总件数。</text>
			</view>
		</view>
		<view class="list-content">
			<uni-swipe-action :disabled="swpipeDisabled">
			    <uni-swipe-action-item :right-options="swipeOptions" :disabled="goodsList.length <= 1" @click="deleteGoods(index)" v-for="(item, index) in goodsList" :key="index">
					<view class="goods-con">
						<view class="list">
							<view class="list-item">
								<view class="list-item-left">
									<text>品名</text>
								</view>
								<view class="list-item-right">
									<view class="input">
										<input type="text" @input="loadQuantityGoodsType(index)" v-model="item.good_quantity" placeholder="一件多个品名录入示例：衣服/日用品" placeholder-style="color:#999;font-size:28rpx;">
									</view>
								</view>
							</view>
							<view class="list-item">
								<view class="list-item-left">
									<text>数量</text>
								</view>
								<view class="list-item-right">
									<view class="input">
										<input type="number" v-model="item.good_number" placeholder="请输入" placeholder-style="color:#999;font-size:28rpx;">
									</view>
								</view>
							</view>
							<view class="list-item">
								<view class="list-item-left">
									<text>件数</text>
								</view>
								<view class="list-item-right">
									<view class="input">
										<input type="number" v-model="item.good_size" placeholder="请填写" placeholder-style="color:#999;font-size:28rpx;">
									</view>
								</view>
							</view>
							
							<view class="list-item">
								<view class="list-item-left">
									<text>货物类型</text>
								</view>
								<view class="list-item-right">
									<view class="right-centent">
										<view class="right-text" :style="item.goodsType.id ? 'color: #333;font-weight: bold;' : ''">
											<text>{{item.goodsType.name || '请输入'}}</text>
										</view>
										<view class="right-icon">
											<image src="/static/images/right1.png" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
			    </uni-swipe-action-item>
			</uni-swipe-action>
			
			<view class="insert-btn" v-if="type === 'multiple'">
				<text class="txt" @click="insertGoods">添加货物</text>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-content">
				<view class="bottom-btn" @click="submitConfirm">
					<text>确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getQuantityGoodsType} from '@/api/goods.js';
	export default {
		data() {
			return {
				type: 'single', // multiple 多选，single 单选
				swipeOptions: [{text: '删除', style: {backgroundColor: '#E82E2E'}}],
				goodsList: [
					{
						goodsType: {},
						good_size: '',
						good_number: '',
						good_quantity: ''
					}
				],
				good_type_id:'',//货物类型接口
			}
		},
		onLoad(options) {
			if (options.type && ['single', 'multiple'].includes(options.type)) {
				this.type = options.type;
			}
			this.good_type_id = options.getGoodTypeId || ''
		},
		computed: {
			swpipeDisabled() {
				return !!(this.goodsList && this.goodsList.length <= 1);
			}
		},
		methods: {
			insertGoods() {
				this.goodsList.push({
						goodsType: {},
						good_size: '',
						good_number: '',
						good_quantity: ''
					});
			},
			deleteGoods(index) {
				this.goodsList.splice(index, 1);
			},
			submitConfirm() {
				try{
					this.goodsList.forEach(item => {
						if (!item.good_quantity) {
							throw new Error('请输入品名');
						}
						if (!item.good_number) {
							throw new Error('请输入数量');
						}
						if (!item.good_size) {
							throw new Error('请输入件数');
						}
						if (!item.goodsType?.id) {
							throw new Error('货物类型异常');
						}
					});
					let data = this.goodsList.map(item => {
						return {
							good_size: item.good_size,
							good_number: item.good_number,
							good_quantity: item.good_quantity,
							goodsTypeInfo: item.goodsType,
							good_type: item.goodsType.name
						};
					});
					uni.$emit('perfectGoods', this.type === 'single' ? data[0] : data);
					uni.navigateBack();
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			async loadQuantityGoodsType(index) {
				try{
					if (!this.goodsList[index].good_quantity) {
						this.goodsList[index].goodsType = {};
						return;
					}
					await getQuantityGoodsType(this.goodsList[index].good_quantity,this.good_type_id).then(res=>{
						if(res.status === 200){
							this.goodsList[index].goodsType = res.goods_type || {};
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFF;
}
.notice{
	padding: 30rpx;
	box-sizing: border-box;
	.notice-content{
		padding: 28rpx 50rpx;
		box-sizing: border-box;
		background: #F5F5F5;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #E82E2E;
		font-weight: 400;
	}
}
.list-content{
	width: 100%;
	padding-bottom: 30rpx;
		
	.goods-con {
		width: 100%;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
		
		.list{
			width: 100%;
			background: #FFFFFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.list-item{
				padding: 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&:last-child{
					border: none;
				}
				.list-item-left{
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}
				.list-item-right{
					.input{
						width: 500rpx;
						text-align: right;
						color: #333;
						font-size: 28rpx;
						font-weight: 500;
					}
					.right-centent{
						display: flex;
						justify-content: flex-end;
						align-items: center;
						.right-text{
							font-size: 28rpx;
							color: #999;
							font-weight: 500;
							padding-right: 14rpx;
						}
						.right-icon{
							display: flex;
							justify-content: center;
							align-items: center;
							image{
								width: 12rpx;
								height: 20rpx;
							}
						}
					}
				}
			}
		}
	}

	.insert-btn {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.txt {
			color: #E82E2E;
			font-size: 28rpx;
			font-weight: 500;
		}
	}
}
.bottom{
	.bottom-content{
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		.bottom-btn{
			margin-top: 26rpx;
			width: 100%;
			height: 88rpx;
			background: #E82E2E;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #FFF;
			font-weight: bold;
		}
	}
}
</style>
